<template>
  <div class="header">
  	 <div class="content-wrapper">
  	 	<div class="avatar"><img :src="seller.avatar" ></div>
  	 	<div class="content">
  	 		<h2 class="title">
  	 			<span class="brand"></span>
  	 			<span class="name">{{seller.name}}</span>
  	 		</h2>
  	 		<div class="description">
  	 			{{seller.description}}/{{seller.deliveryTime}}分钟送达
  	 		</div>
  	 		<div v-if="seller.supports" class="support">
 			<!--若不添加 v-if="seller.supports"，则ajax还没加载时，
				传递过来的seller是个空对象，seller.supports[0]使用
				空对象的第0个就会报错
 			 -->
  	 			<span class="icon" :class="classMap[seller.supports[0].type]"></span>
  	 			<span class="text">{{seller.supports[0].description}}</span>
  	 		</div>
  	 		<div v-if="seller.supports"
  	 		     class="support-count"
				@click="showDetail"
  	 		>
  	 			<span class="count">{{seller.supports.length}}个</span>
  	 			<span class="icon-keyboard_arrow_right"></span>
  	 		</div>
  	 	</div>
  	 </div>
  	 <div class="bulletin-wrapper">
  	 	<span class="bulletin-title"></span>
  	 	<span class="bulletin-text">{{seller.bulletin}}</span>
  	 	<span class="icon-keyboard_arrow_right"></span>
  	 </div>
  	 <div class="background">
  	 	<img :src="seller.avatar" width="100%" height="100%">
  	 </div>
  	 <!-- 弹幕 -->
  	 <transition>
	  	 <div class="detail" v-show="detailShow" >
	  	 	 <div class="detail-wrapper clearfix">
	  	 	 	<div class="detail-main">
	  	 	 		<h1 class="name">{{seller.name}}</h1>
					<div class="star-wrapper">
						<star :size="48" :score="seller.score"></star>
					</div>
	  	 	 		<div class="title">
	  	 	 			<div class="line"></div>
	  	 	 			<div class="text">优惠信息</div>
	  	 	 			<div class="line"></div>
	  	 	 		</div>
					<ul v-if="seller.supports" class="supports">
						<li class="support-item"
						 	v-for="item in seller.supports"
						 >
						 	<span class="icon" 
						 		  :class="classMap[item.type]"
						 	></span>
						 	<span class="text">
						 		{{item.description}}
						 	</span>
						 </li>
					</ul>
					<div class="title">
	  	 	 			<div class="line"></div>
	  	 	 			<div class="text">商家公告</div>
	  	 	 			<div class="line"></div>
	  	 	 		</div>
					<div class="bulletin">
						<p class="content">{{seller.bulletin}}</p>
					</div>

	  	 	 	</div>
	  	 	 </div>
	  	 	 <div class="detail-close" @click="hideDetail"><span class="icon-close"></span></div>
	  	 </div>
  	 </transition>
  </div>
</template>

<script>
import star from "../star/star.vue"
export default {
  name: 'Header',
  props:{
  	seller:Object
  },
  components:{
  	star
  },
  data () {
  	return {
  		detailShow:false
  	}
  },
  methods:{
  	showDetail () {	
  		this.detailShow = true
  	},
  	hideDetail (){
  		this.detailShow = false
  	}
  },
  created(){
  	this.classMap = ['decrease','discount',"special",'invoice','guarantee']
  } 
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../common/stylus/mixin.styl'
.v-enter,.v-leave-to
	opacity: 0
.v-enter-active,.v-leave-active
	transition:opacity .5s linear;
.header
	position:relative
	color:#fff
	background:rgba(1, 17, 27, .5)
	overflow hidden
	.content-wrapper
		position:relative
		padding:24px 12px 18px 24px
		font-size:0
		.avatar
			display:inline-block
			vertical-align:top
			img
				border-radius 2px
				width:64px
				height:64px
		.content
			display:inline-block
			margin-left:16px
			font-size:14px			
			.title
				margin:2px 0 8px 0
				.brand
					display inline-block
					vertical-align:top
					width:30px
					height 18px
					bg-image('brand')
					background-size:30px 18px
					background-repeat: no-repeat
				.name
					margin-left:6px
					font-size:16px
					line-height:18px
					font-weight:bold				
			.description
				margin-bottom:10px
				line-height:12px
				font-size:12px
			.support
				.icon
					display:inline-block
					vertical-align:middle
					width:12px
					height:12px
					margin-right:4px
					background-size:12px 12px
					background-repeat:no-repeat
					&.decrease
						bg-image("decrease_1")
					&.discount
						bg-image("discount_1")
					&.guarantee
						bg-image('guarantee_1')
					&.invoice
						bg-image('invoice_1')
					&.special
						bg-image('special_1')
				.text
					font-size:10px
					line-height:12px
			.support-count
				position:absolute
				right 12px
				bottom 14px
				padding 0 8px
				height 24px
				line-height 24px
				border-radius 14px
				background rgba(0, 0, 0, .2) 
				text-align center
				.count
					font-size:10px
					vertical-align top
				.icon-keyboard_arrow_right
					margin-left 2px
					line-height 24px
					font-size:10px
	.bulletin-wrapper
		position:relative
		height:28px
		line-height 28px
		padding:0 22px 0 12px
		ellipsis()
		background:rgba(7, 17,27, .2)
		.bulletin-title
			display:inline-block
			vertical-align:-1px
			width:22px
			height:12px
			bg-image('bulletin')
			background-size:22px 12px
		.bulletin-text
			font-size:10px
			margin:0 4px
		.icon-keyboard_arrow_right
			position:absolute
			right:12px
			top:8px
			font-size:10px
	.background
		position:absolute	
		left:0
		top:0
		width:100%
		height:100%
		z-index:-1	
		filter:blur(10px)
	.detail
		position: fixed
		z-index:100
		left:0
		top:0
		width:100%
		height:100%
		background:rgba(7, 17, 27, .8)
		overflow:auto
		backdrop-filter:blur(10px)//ios识别
		.detail-wrapper
			min-height:100%
			width:100%
			.detail-main
				margin-top:64px
				padding-bottom:64px
				.name
					line-height:16px
					text-align:center
					font-size:16px
					font-weight:700
				.star-wrapper
					margin-top:18px
					padding:2px 0
					text-align:center
				.title
					display:flex
					width:80%
					margin:28px auto 24px
					.line
						flex:1
						position:relative
						top:-6px
						border-bottom:1px solid rgba(255, 255, 255, .2)
					.text
						padding:0 12px
						font-weight:700
						font-size:14px
				.supports
					width:80%
					margin:0 auto
					.support-item
						padding:0 12px
						margin-bottom:12px
						font-size:0
						&:last-child
							margin-bottom:0
						.icon
							display:inline-block
							width:16px
							height:16px
							vertical-align:-4px
							margin-right:6px
							background-size:16px 16px
							background-repeat:no-repeat
							&.decrease
								bg-image("decrease_1")
							&.discount
								bg-image("discount_1")
							&.guarantee
								bg-image('guarantee_1')
							&.invoice
								bg-image('invoice_1')
							&.special
							
								bg-image('special_1')
						.text
							font-size:12px
							line-height:12px
				.bulletin 
					width:80%
					margin:0 auto
					.content
						padding:0 12px
						line-height:24px
						font-size:12px								
		.detail-close
			position:relative
			width:32px
			height:32px
			margin:-64px auto 0
			clear:both
			.icon-close
				font-size:32px
			
			

</style>
